<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="${request.contextPath}/static/static/css/font.css">
		<link rel="stylesheet" href="${request.contextPath}/static/static/css/weadmin.css">
	</head>

	<body>
		<div class="weadmin-body">
			<div class="layui-row">
				<div class="layui-col-md6" id="column" style="height:400px;"></div>
				<div class="layui-col-md6" id="pie" style="height:400px;"></div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md6" id="container" style="height:500px;"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="${request.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.min.js"></script>
	<script type="text/javascript">
		layui.extend({
			admin: '{/}../static/js/admin',
		});
		layui.use(['jquery', 'element','util', 'admin', 'carousel'], function() {
			var element = layui.element,
				$ = layui.jquery,
				carousel = layui.carousel,
				util = layui.util,
				admin = layui.admin;
			//建造实例
			carousel.render({
				elem: '.weadmin-shortcut'
				,width: '100%' //设置容器宽度				
				,arrow: 'none' //始终显示箭头	
				,trigger: 'hover'
				,autoplay:false
			});
			carousel.render({
				elem: '.weadmin-notice'
				,width: '100%' //设置容器宽度				
				,arrow: 'none' //始终显示箭头	
				,trigger: 'hover'
				,autoplay:true
			});
			$(function(){
				setTimeAgo(2018,0,1,13,14,0,'#firstTime');
				setTimeAgo(2018,2,28,16,0,0,'#lastTime');
				// 基于准备好的dom，初始化echarts实例
		        var column = echarts.init( document.getElementById('column') );
		        var pie = echarts.init( document.getElementById('pie') );

		        // 指定图表的配置项和数据
		        var option1 = {
		            title: {
		                text: 'ECharts 入门示例'
		            },
		            tooltip: {},
		            legend: {
		                data:['销量']
		            },
		            xAxis: {
		                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
		            },
		            yAxis: {},
		            series: [{
		                name: '销量',
		                type: 'bar',
		                data: [5, 20, 36, 10, 10, 20]
		            }]
		        };

		        // 使用刚指定的配置项和数据显示图表。
		        column.setOption(option1);
		        var option2 = {
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius: '55%',
				            data:[
				                {value:235, name:'视频广告'},
				                {value:274, name:'联盟广告'},
				                {value:310, name:'邮件营销'},
				                {value:335, name:'直接访问'},
				                {value:400, name:'搜索引擎'}
				            ]
				        }
				    ]
				};
				pie.setOption(option2);

				var dom = document.getElementById("container");
		        var myChart = echarts.init(dom);
		        var app = {};
		        option = null;
		        app.title = '折柱混合';

		        option = {
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'cross',
		                    crossStyle: {
		                        color: '#999'
		                    }
		                }
		            },
		            toolbox: {
		                feature: {
		                    dataView: {show: true, readOnly: false},
		                    magicType: {show: true, type: ['line', 'bar']},
		                    restore: {show: true},
		                    saveAsImage: {show: true}
		                }
		            },
		            legend: {
		                data:['蒸发量','降水量','平均温度']
		            },
		            xAxis: [
		                {
		                    type: 'category',
		                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
		                    axisPointer: {
		                        type: 'shadow'
		                    }
		                }
		            ],
		            yAxis: [
		                {
		                    type: 'value',
		                    name: '水量',
		                    min: 0,
		                    max: 250,
		                    interval: 50,
		                    axisLabel: {
		                        formatter: '{value} ml'
		                    }
		                },
		                {
		                    type: 'value',
		                    name: '温度',
		                    min: 0,
		                    max: 25,
		                    interval: 5,
		                    axisLabel: {
		                        formatter: '{value} °C'
		                    }
		                }
		            ],
		            series: [
		                {
		                    name:'蒸发量',
		                    type:'bar',
		                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		                },
		                {
		                    name:'降水量',
		                    type:'bar',
		                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		                },
		                {
		                    name:'平均温度',
		                    type:'line',
		                    yAxisIndex: 1,
		                    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
		                }
		            ]
		        };
		        if (option && typeof option === "object") {
		            myChart.setOption(option, true);
		        }

			});
			function setTimeAgo(y, M, d, H, m, s,id){
			    var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0, s||0));
			    $(id).html(str);
			    // console.log(str);
			    parent.$('.loading').addClass('hideLoading');
			 };
		});
	</script>

</html>